<template>
  <div class="item1">
    <div class="breadcrumb" :gutter="24">
      {{$t('other.device_status')}}
      <el-form ref="form" :model="formData" label-width="70px" size="small">
        <el-row :gutter="28">
          <el-col :xs="3" :sm="1" :md="1" :lg="1" :xl="1">
            <el-button type="primary" size="small" :icon="'iconfont ' + icon" class="change" @click="changePattern"></el-button>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" style="padding-top:10px">
            <el-form-item :label="$t('common.keyword')">
              <el-input v-model="formData.keyword" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="2" style="padding-top:10px">
            <el-form-item label-width="0px">
              <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
            </el-form-item>
          </el-col>
          <!-- <div class="btngroup" style="padding-right:15px">
            <el-button type="primary" size="small" @click="handleCancelAllot()">手工取消分配</el-button>
          </div> -->
        </el-row>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="tableAuto">
      <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
        :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" :cell-style="statusStyle" v-if="!isCard" ref="refTable"
        highlight-current-row @sort-change='sortChange'>
        <!-- <el-table-column label="" width="50" align="center">
          <template slot-scope="scope">
            <div>
              <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column type="index" :label="$t('common.number')" width="80" align="center">
          <template slot-scope="scope">
            {{table_index(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="entName" :label="$t('basic.entity_name')" show-overflow-tooltip width="130"
          sortable='custom'></el-table-column>
        <el-table-column prop="className" :label="$t('basic.type_name')" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            {{scope.row.equipmentClassVo.className}}
          </template>
        </el-table-column>
        <el-table-column prop="devState" :label="$t('recipe.state')" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            <span>
              {{queryStatus(scope.row.devState,scope.row.tagAddr)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="tagAddr" :label="$t('basic.device_address')" show-overflow-tooltip width="130">
        </el-table-column>

        <el-table-column prop="entName" :label="$t('basic.equipment_group')" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            {{scope.row.trainTxt}}
          </template>
        </el-table-column>
        <el-table-column prop="jobId" :label="$t('recipe.assignment_name')" show-overflow-tooltip width="150" sortable='custom'>
          <template slot-scope="scope">
            {{scope.row.jobVo ? scope.row.jobVo.jobDesc : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="woId" :label="$t('workorder.work_order_number')" show-overflow-tooltip width="140"
          sortable='custom'></el-table-column>
        <el-table-column prop="isAllocated" :label="$t('other.whether_to_allocate')" width="100">
          <template slot-scope="scope">
            {{scope.row.isAllocated == 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column prop="assetNum" :label="$t('basic.equipment_number')" show-overflow-tooltip width="130"></el-table-column>
        <el-table-column prop="description" :label="$t('basic.remarks')" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <!-- 卡片区域 -->
    <div v-if="isCard">
      <div class="cardBox" :key="keyTime" style="overflow-x: hidden;" :style="{height:height+'px'} " v-loading="tableLoading">
        <el-row :gutter="25">
          <template v-for="(item,index) in tableData">
            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
              <div class="card" :key="index" :class="[index == cardIndex ? 'selectCard' : '',getColor(item)]"
                @click="handleIndex(index,item)">
                <p class="time" style="font-weight:bold">{{$t('basic.entity_name')}}：{{item.entName}}</p>
                <div class="time">
                  <!-- <el-tooltip :content="item.assetNum" effect="dark" placement="top" v-if="item.assetNum">
                    <p class="Desc">设备编号：{{item.assetNum}}</p>
                  </el-tooltip> -->
                  <p class="Desc">{{$t('basic.equipment_number')}}：{{item.assetNum}}</p>
                </div>
                <div class="time">
                  <!-- <el-tooltip :content="item.woId" effect="dark" placement="top" v-if="item.woId">
                    <p class="Desc">工单号：{{item.woId}}</p>
                  </el-tooltip> -->
                  <p class="Desc">{{$t('workorder.work_order_number')}}：{{item.woId}}</p>
                </div>
                <div class="time">
                  <!-- <el-tooltip :content="item.jobVo ? item.jobVo.jobDesc : ''" effect="dark" placement="top"
                    v-if="item.jobVo&&item.jobVo.jobDesc">
                    <p class="Desc">作业号：{{item.jobVo ? item.jobVo.jobDesc : ''}}</p>
                  </el-tooltip> -->
                  <p class="Desc">{{$t('recipe.assignment_name')}}：{{item.jobVo ? item.jobVo.jobDesc : ''}}</p>
                </div>
                <!-- <div class="time">
                                    <el-tooltip :content="item.trainTxt" effect="dark" placement="top">
                                        <p class="Desc">设备组：{{item.trainTxt}}</p>
                                    </el-tooltip>
                                </div> -->
              </div>
            </el-col>
          </template>
          <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
        </el-row>
      </div>
    </div>

    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 30, 50, 100]"
        :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { configure } from "@/api/configure"
export default {
  data () {
    return {
      screenWidth: document.body.clientWidth,
      height: document.body.offsetHeight - 230,
      tableData: [],
      formData: {
        keyword: "",
      },
      icon: "icon-biaoge",
      pager: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        field: 'classId',
        order: '',
      },
      radioId: "",
      cardIndex: -1,
      isCard: true,
      tableLoading: false,
      keyTime: 0,
      timer: null,
    }
  },
  created () {
    this.getEquipmentList()
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    handleSearch () {
      this.pager.pageNum = 1;
      this.getEquipmentList()
    },
    getEquipmentList () {
      const param = {
        entName: this.formData.keyword,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: this.pager.field,
        order: this.pager.order,
      }
      // this.tableLoading = true
      configure.getEquipmentList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
          this.tableData.forEach(item => {
            item.trainTxt = ''
            if (item.trainVos && item.trainVos.length > 0) {
              item.trainVos.forEach((item1, index) => {
                item.trainTxt += index < item.trainVos.length - 1 ? item1.entName + "，" : item1.entName
              })
            }
          })
          this.keyTime = new Date().getTime()

          clearInterval(this.timer)
          this.timer = setInterval(() => {
            this.getEquipmentList()
          }, 2000)
        }
      }).catch(e => {
        this.tableLoading = false
        this.$message.error('服务器繁忙,请稍后再试');
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getEquipmentList()
    },
    handleIndex (index, row) {
      this.cardIndex = index
      this.radioId = row.fid;
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getEquipmentList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getEquipmentList()
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.$refs.refTable.setCurrentRow(row);
    },
    changePattern () {
      this.isCard = !this.isCard
      this.radioId = ''
      this.cardIndex = -1
      this.icon = this.isCard ? 'icon-qiehuan' : 'icon-biaoge'
    },
    async handleCancelAllot () {
      if (this.radioId === '') {
        this.$message.error('请选择设备');
        return
      }
      let that = this
      try {
        let res = await configure.findEquipment(this.radioId)
        console.log(res)
        if (res.code == 200) {
          that.$customConfirm({
            content: "请确认是否取消设备" + res.data.entName + "的分配",
            onok () {
              const param = Object.assign({}, res.data)
              param.jobId = ""
              param.isAllocated = 0
              param.woId = ""
              configure.equipmentAdd(param, "编辑").then(res => {
                if (res.code == 200) {
                  that.getEquipmentList()
                } else {
                  that.$message.error(res.msg);
                }
              }).catch(e => {
                that.loading = false
              })

            }
          });
        }
      } catch (e) { }
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    getColor (type) {
      // {{scope.row.isAllocated == 1 ? '是' : '否'}}
      if (type.tagAddr == null) {
        return 'hei'
      } else {
        if (type.devState == 10) {
          return 'lv'
        } else if (type.devState == 21) {
          return 'hong'
        } else if (type.devState == 11) {
          return 'huang'
        } else if (type.devState == 51 || type.devState == 81) {
          return 'pinhong'
        } else {
          return 'hui'
        }
      }
    },
    statusStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 5) {
        if (this.tableData[rowIndex].tagAddr == null) {
          return 'background:#FFFF00'
        }
      } if (columnIndex == 4) {
        if (this.tableData[rowIndex].tagAddr == null) {
          return 'background:#0e0d0d'
        } else if (this.tableData[rowIndex].devState == 10) {
          return 'background:#22b14c'
        } else if (this.tableData[rowIndex].devState == 21) {
          return 'background:#ed1c24'
        } else if (this.tableData[rowIndex].devState == 11) {
          return 'background:#ffd76a'
        } else if (this.tableData[rowIndex].devState == 51 || this.tableData[rowIndex].devState == 81) {
          return 'background:#b84a5b'
        } else {
          return 'background:#c7c2c8'
        }
      }
    },
    queryStatus (status, tagAddr) {
      if (tagAddr == null) return ''
      switch (status) {
        case 10:
          return this.$t('workorder.function')
        case 11:
          return this.$t('workorder.finish')
        case 21:
          return this.$t('workorder.suspend')
        case 51:
        case 81:
          return "未连接"
        default:
          return "空闲"
      }
    },

  }
}
</script>

<style scoped>
.btngroup {
  float: right;
}
.change >>> .iconfont {
  font-size: 13px !important;
}
.titmepicker >>> .el-date-editor {
  width: 100%;
}
.titmepicker >>> .el-date-editor .el-range-separator {
  width: 8%;
}
.isShowDialog >>> .el-select {
  width: 100%;
}
.tableAuto,
.cardBox {
  clear: both;
}
.pagination-area {
  padding-top: 10px;
}
.Desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardBox {
  overflow-y: auto;
}
.card {
  background: #eaebec;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
}
.card p {
  font-size: 12px;
  line-height: 22px;
  transform: scale(0.9);
}
.desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  font-weight: bold;
}
.selectCard {
  background: #f6fbff;
}
@media only screen and (min-width: 1200px) {
  .el-col-lg-5 {
    width: 19.83333%;
  }
}
.lv {
  border-left: 8px solid #22b14c;
}
.hui {
  border-left: 8px solid #c7c2c8;
}
.hong {
  border-left: 8px solid #ed1c24;
}
.huang {
  border-left: 8px solid #ffd76a;
}
.pinhong {
  border-left: 8px solid #b84a5b;
}
.hei {
  border-left: 8px solid #0e0d0d;
}
</style>